<template>
  <div>
    <proposer></proposer>
    <div class="header">
      您共浏览了 {{arr.length}} 个职位
    </div>
    <div class="bottom">
      <div class="box"
           v-if="isShow">
        <i class="el-icon-warning-outline"></i>
        <p>还没有浏览记录哦</p>
        <p>赶快到<span class="list"
                @click="li">职位列表</span>去浏览把</p>
      </div>
    </div>
    <div class="cad"
         v-show="!isShow">
      <div class="card"
           v-for="(item,index) in arr"
           :key="index">
        <!-- <div class="quxiao"
             @click="dle(index)">X</div> -->
        <div class="card-top">{{item.position}}</div>
        <div class="card-cen">
          <div class="cen-lt">
            <i class="el-icon-location-outline"></i>
            {{item.site}}
          </div>
          <div class="cen-rt">
            <i class="el-icon-time">
              {{item.time}}
            </i>
          </div>
        </div>
        <div class="card-fot">
          <i class="el-icon-s-data"></i>
          {{item.sort}}
        </div>
      </div>
    </div>
    <div class="liebiao">
      <div class="liebiao-c"
           @click="back">
        返回职位列表
      </div>
    </div>
  </div>
</template>

<script>
import proposer from "@/components/proposer"
import { Toast } from 'vant'
export default {
  components: { proposer },
  data () {
    return {
      isShow: "",
      arr: [
        {
          position: "安全技术高级工程师",
          site: "深圳",
          time: "2021-12-17",
          sort: "云服务族"
        },
        {
          position: "前端开发工程师",
          site: "深圳",
          time: "2021-12-18",
          sort: "开发族"
        },
        {
          position: "后端开发工程师",
          site: "深圳",
          time: "2021-12-18",
          sort: "开发族"
        },
        {
          position: "全栈开发工程师",
          site: "深圳",
          time: "2021-4-17",
          sort: "开发一族"
        }
      ],
      components: {
        proposer
      }
    }
  },
  methods: {
    li () {
      this.$router.push('/phoneindex')
    },
    pd () {
      if (this.arr.length == 0) {
        this.isShow = true
      } else {
        this.isShow = false
      }
    },
    back () {
      this.$router.push("/phoneindex")
    }
    // dle (index) {
    //   this.arr.splice(index, 1)
    //   Toast({
    //     message: '取消成功',
    //     icon: 'warning-o'
    //   })
    // }
  },
  mounted () {
    this.pd()
  }
}
</script>

<style scoped>
.header {
  height: 50px;
  background: #9b0f15;
  color: #fff;
  font-size: 17px;
  line-height: 50px;
  padding-left: 25px;
}
p {
  margin: 0;
}
.bottom /deep/.el-icon-warning-outline {
  font-size: 60px;
  margin-bottom: 15px;
}
.list {
  text-decoration: underline;
}
.bottom p {
  font-size: 15px;
  margin-top: 5px;
}
.box {
  text-align: center;
  margin-top: 65px;
}
.card {
  border-bottom: 1px solid #e3e3e3;
  padding: 20px;
  position: relative;
}
.card-top {
  font-size: 14px;
  color: #333333;
  margin-bottom: 10px;
}
.card-cen {
  font-size: 12px;
  color: #989898;
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
.card-fot {
  color: #989898;
  font-size: 12px;
}
.quxiao {
  height: 21px;
  width: 21px;
  border-radius: 50%;
  background: #ccc;
  line-height: 21px;
  text-align: center;
  position: absolute;
  right: 5px;
  top: 15px;
}
.liebiao {
  height: 50px;
  color: #fff;
  text-align: center;
  position: fixed;
  bottom: 0;
  width: 100%;
}
.liebiao-c {
  background: #9b0f15;
  height: 100%;
  line-height: 50px;
  padding-right: 10px;
  padding-left: 10px;
}
</style>